

<!DOCTYPE html>
<html lang="en" color-mode=light>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>为绑定域名的 GitHub Pages 启用 HTTPS - 习武的个人博客</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="google" content="notranslate" />
  
  <meta name="description" content="Update 2018/05/01: GitHub 官...">
  <meta name="author" content="习武">
  <link rel="icon" href="/xiwu_see/images/icons/favicon-16x16.png" type="image/png" sizes="16x16">
  <link rel="icon" href="/xiwu_see/images/icons/favicon-32x32.png" type="image/png" sizes="32x32">
  <link rel="apple-touch-icon" href="/xiwu_see/images/icons/apple-touch-icon.png" sizes="180x180">
  <meta rel="mask-icon" href="/xiwu_see/images/icons/stun-logo.svg" color="#333333">
  
    <meta rel="msapplication-TileImage" content="/xiwu_see/images/icons/favicon-144x144.jpeg">
    <meta rel="msapplication-TileColor" content="#000000">
  

  
<link rel="stylesheet" href="/xiwu_see/css/style.css">


  
    
<link rel="stylesheet" href="//at.alicdn.com/t/font_1445822_s6x2xcokxrl.css">

  

  
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">

  

  
    
      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/xcode.min.css" name="highlight-style" mode="light">

      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/solarized-dark.min.css" name="highlight-style" mode="dark">

      
  

  <script>
    var CONFIG = window.CONFIG || {};
    var ZHAOO = window.ZHAOO || {};
    CONFIG = {
      isHome: false,
      fancybox: true,
      pjax: false,
      lazyload: {
        enable: true,
        only_post: 'false',
        loading: '/xiwu_see/images/theme/loading.gif'
      },
      donate: {
        enable: false,
        alipay: 'https://pic.izhaoo.com/alipay.jpg',
        wechat: 'https://pic.izhaoo.com/wechat.jpg'
      },
      galleries: {
        enable: true
      },
      fab: {
        enable: true,
        always_show: false
      },
      carrier: {
        enable: true
      },
      daovoice: {
        enable: false
      },
      preview: {
        background: {
          default: '/xiwu_see/images/theme/welcome-image.jpg',
          api: ''
        },
        motto: {
          default: '我在开了灯的床头下，想问问自己的心啊。',
          api: 'https://v2.jinrishici.com/one.json',
          data_contents: '["data","content"]'
        },
      },
      qrcode: {
        enable: false,
        type: 'url',
        image: 'https://pic.izhaoo.com/weapp-code.jpg',
      },
      toc: {
        enable: true
      },
      scrollbar: {
        model: 'simple'
      },
      notification: {
        enable: false,
        delay: 4500,
        list: '',
        page_white_list: '',
        page_black_list: ''
      }
    }
  </script>

  

  

<meta name="generator" content="Hexo 5.3.0"></head>

<body class="lock-screen">
  <div class="loading"></div>
  


  <nav class="navbar">
    <div class="left">
      
      
        <i class="iconfont iconmoono" id="color-toggle" color-toggle="light"></i>
      
    </div>
    <div class="center">为绑定域名的 GitHub Pages 启用 HTTPS</div>
    <div class="right">
      <i class="iconfont iconmenu j-navbar-menu"></i>
    </div>
    
  </nav>

  

<nav class="menu">
  <div class="menu-wrap">
    <div class="menu-close">
      <i class="iconfont iconbaseline-close-px"></i>
    </div>
    <ul class="menu-content"><li class="menu-item">
        <a href="/xiwu_see/ " class="underline "> 首页</a>
      </li><li class="menu-item">
        <a href="/xiwu_see/archives/ " class="underline "> 归档</a>
      </li><li class="menu-item">
        <a href="/xiwu_see/tags/ " class="underline "> 标签</a>
      </li><li class="menu-item">
        <a href="/xiwu_see/categories/ " class="underline "> 分类</a>
      </li><li class="menu-item">
        <a href="/xiwu_see/about/ " class="underline "> 关于</a>
      </li></ul>
    
      <div class="menu-copyright"><p>Powered by <a target="_blank" href="https://hexo.io">习武</a>  |  Theme - <a target="_blank" href="https://xiwu123.gitee.io/xiwu_see">习武的个人博客</a></p></div>
    
  </div>
</nav>
  <main id="main">
  <div class="article-wrap">
    <div class="row container">
      <div class="col-xl-3"></div>
      <div class="col-xl-6"><article class="article">
  <div class="wrap">
    <section class="head">
  <img   class="lazyload" data-original="/xiwu_see/images/theme/theme-https-1.jpeg" src=""  draggable="false">
  <div class="head-mask">
    <h1 class="head-title">为绑定域名的 GitHub Pages 启用 HTTPS</h1>
    <div class="head-info">
      <span class="post-info-item"><i class="iconfont iconcalendar"></i>May 21, 2016</span>
      
      <span class="post-info-item"><i class="iconfont iconfont-size"></i>2770</span>
    </div>
  </div>
</section>
    <section class="main">
      <section class="content">
        <p><strong>Update 2018/05/01: GitHub 官方已经支持自定义域名启用 HTTPS 了，见 <a target="_blank" rel="noopener" href="https://blog.github.com/2018-05-01-github-pages-custom-domains-https/">https://blog.github.com/2018-05-01-github-pages-custom-domains-https/</a></strong></p>
<p><strong>Update 2016/07/11: 收到 Kloudsec 的邮件，说将在 2016/08/01 停止服务，所以如下方法在那之后会无法使用，寻找 GitHub Pages + Custom Domain + HTTPS 的方法的童鞋请不要再尝试 Kloudsec 了，去找一找别的方法吧。</strong></p>
<p>虽然现在各种网站都在 HTTPS 化，甚至有的个人网站在添加链接的说明里明确声明只与启用 HTTPS 的网站交换链接，但一直以来我启用 HTTPS 的需求并不强烈，又加上有懒癌在身，实在是没有动力去折腾，直到最近发生了几件事情。</p>
<h2 id="缘起"><a href="#缘起" class="headerlink" title="缘起"></a>缘起</h2><ol>
<li><p>最近一段时间也不知道是 GitHub Pages 做了调整还是 Google 的收录策略有了变化，Google 收录我的博客页面都是同时收录了 HTTP 和 HTTPS 两种版本，而很遗憾这个博客并没有配置有效的 SSL 证书，所以点开的是一个 HTTPS 的链接就会被浏览器提示连接不可信，有安全风险云云，虽然访问量不大，但这样体验太差，也是蛮闹心的。</p>
</li>
<li><p>恰逢知乎上有人邀我答题 <a target="_blank" rel="noopener" href="https://www.zhihu.com/question/33495825">Github Pages 绑定了个人域名，怎么使用 HTTPS 访问而证书不报错呢？</a>。</p>
</li>
<li><p>三月份的时候 <a target="_blank" rel="noopener" href="https://github.com/nubela">@nubela</a> 发邮件邀请我试用他为绑定域名的 GitHub Pages 制作的一键启用 HTTPS 的工具，而我当时答复的是实在太忙，后来有空再折腾。</p>
</li>
</ol>
<p>几个理由加在一起，终于战胜了懒癌，让我动了起来。</p>
<p><img    class="lazyload" data-original="/xiwu_see/images/posts/github/github-pages-with-https.png" src=""   ><span class="image-caption">enable https for GitHub Pages</span></p>
<h2 id="步骤"><a href="#步骤" class="headerlink" title="步骤"></a>步骤</h2><p>@nubela 提供的工具非常友好且方便，第一次使用的我只简单做了一些配置，没有对 GitHub Pages 仓库做任何更改就实现了全站 HTTPS 化，自动使用了 Let’s Encrypt 提供的免费 SSL 证书，有效期 90 天，Kloudsec 会在它过期前自动续期，换句话说，只要 Kloudsec 还活着并且免费提供这项服务的话，后面就不用管这个了。</p>
<p>记录操作步骤如下：</p>
<ol>
<li><p>打开 Kloudsec 为 GitHub Pages 提供的工具 <a target="_blank" rel="noopener" href="https://kloudsec.com/github-pages/new">Kloudsec for GitHub Pages</a>。</p>
</li>
<li><p>按工具里的要求填好三个部分的内容，依次是</p>
<ul>
<li><p>用于注册 Kloudsec 的邮箱和为 Kloudsec 账户设置的密码。</p>
<p><img    class="lazyload" data-original="/xiwu_see/images/posts/github/https-kloudsec-account.png" src=""   ><span class="image-caption">Register a Kloudsec account</span></p>
</li>
<li><p>GitHub Pages 项目的 URL 和绑定的域名。</p>
<p><img    class="lazyload" data-original="/xiwu_see/images/posts/github/https-config-gh.png" src=""   ><span class="image-caption">Configure your Github Page</span></p>
</li>
<li><p>到你的域名解析控制面板里添加工具要求的 A 记录。</p>
<p><img    class="lazyload" data-original="/xiwu_see/images/posts/github/https-config-dns.png" src=""   ><span class="image-caption">Configure your DNS settings</span></p>
<p><strong>注意：</strong> 每个 A 记录应只保留一个 IP，比如之前将 @ 做了 A 记录到 GitHub Pages 的 IP 上了，那现在将其删除，并添加工具提供的 IP。</p>
</li>
</ul>
</li>
<li><p>去上一步填写的邮箱里收邮件，激活 Kloudsec 账号并登录。</p>
</li>
<li><p>进入到 Dashboard 的 SETTINGS，在 Web Server Origin IP / Hostname 一栏填上 GitHub Pages 的可用 IP，比如我填写的是 <code>103.245.222.133</code>。</p>
<p><img    class="lazyload" data-original="/xiwu_see/images/posts/github/https-config-server-ip.png" src=""   ><span class="image-caption">Web Server Origin IP</span></p>
</li>
<li><p>开启 HTTP 自动跳转到 HTTPS。<em>（非必须，按自己需求来。）</em></p>
<p>进入到 Dashboard 的 PROTECTION，点击 SSL Encryption 里的按钮，选择你的网站：</p>
<p><img    class="lazyload" data-original="/xiwu_see/images/posts/github/https-config-redirection-1.png" src=""   ><span class="image-caption">PROTECTION</span></p>
<p>将 Automatically redirect to HTTPS site? 下面的开关切换到 ON：</p>
<p><img    class="lazyload" data-original="/xiwu_see/images/posts/github/https-config-redirection-2.png" src=""   ><span class="image-caption">Automatically redirect to HTTPS site?</span></p>
</li>
<li><p>进入到 Dashboard 的 PLUGIN STORE，启用 Offline Protection、Page Optimizer 和 One-Click Encryption，一般来讲免费的计划就够用了，如果你想要使用付费计划提供更多更好的服务，那按需选择吧。</p>
<p><img    class="lazyload" data-original="/xiwu_see/images/posts/github/https-config-plugin-store.png" src=""   ><span class="image-caption">Plugin Store</span></p>
</li>
</ol>
<p>恭喜你已完成所有步骤！等待几分钟生效即可。</p>
<h2 id="后话"><a href="#后话" class="headerlink" title="后话"></a>后话</h2><h3 id="实现原理"><a href="#实现原理" class="headerlink" title="实现原理"></a>实现原理</h3><p>看 Kloudsec 的文档里描述的 <a target="_blank" rel="noopener" href="https://docs.kloudsec.com/#section-how-does-it-work-">HOW DOES IT WORK?</a>，它提供的服务处于我们的网站服务器和我们的网站访问者之间，其原理是缓存了我们服务器上的页面，所以实际用户建立的 HTTPS 连接是用户的浏览器与 Kloudsec 之间的。</p>
<h3 id="使用-Kloudsec-的好处"><a href="#使用-Kloudsec-的好处" class="headerlink" title="使用 Kloudsec 的好处"></a>使用 Kloudsec 的好处</h3><ul>
<li><p>摆脱了证书不可信存在安全风险的不友好提示。</p>
</li>
<li><p>配置方便，一劳永逸。</p>
</li>
<li><p>访问速度并未受影响<del>，因为缓存里优化了图片大小，合并了 CSS/JS，甚至可能更快了。</del></p>
</li>
<li><p>小绿锁看着舒心。</p>
</li>
</ul>
<h3 id="使用-Kloudsec-的风险和影响"><a href="#使用-Kloudsec-的风险和影响" class="headerlink" title="使用 Kloudsec 的风险和影响"></a>使用 Kloudsec 的风险和影响</h3><ul>
<li><p>貌似是个小公司，这样的免费服务能提供多长时间只有天知道。</p>
</li>
<li><p><del>因为用户看到是在 Kloudsec 上的缓存页面，所以我们更新 GitHub Pages 内容后，刷新线上页面效果的时间变久了，以前上传完基本马上就能看到，现在有时候部分页面会延迟两三分钟，我勉强能接受。</del></p>
<p>Update: 2016/6/16 现在基本上传完马上就能看到了。</p>
</li>
<li><p><del>很偶尔会出现样式加载不完整的情况，刷新就好了。</del></p>
<p>Update: 2016/6/16 最近基本没出现过了。</p>
</li>
<li><p><del>缓存页面合并了 CSS 和 JS 文件，使用开发工具在线调试时要找到样式源文件变困难了——可能看到全都在一个 CSS 文件里。不过我大部分情况下都是用 Jekyll 在本地调试好再上传，这点对我影响不大。</del></p>
<p>Update: 2016/6/16 现在貌似不会合并了。</p>
</li>
<li><p>如果引用了其它域名下的非 HTTPS 的 CSS 和图片资源等，开发者控制台下会有 error，显示不受影响。</p>
</li>
<li><p><del>Google 索引状态会受影响，目前本博客来自 Google 的流量完全没有了，估计需要一段时间才能恢复。</del></p>
<p>Update: 2016/6/16 应该影响不大，只是 Google Search Console 将 http 与 https 的未当成一个网站来统计，所以给我造成错觉了。</p>
</li>
</ul>
<p>接下来，能做的就是祈祷 Kloudsec 不要挂了。:laughing:</p>
<h2 id="其它做法"><a href="#其它做法" class="headerlink" title="其它做法"></a>其它做法</h2><p>如果使用 GitLab 提供的 Pages 服务，那它直接支持添加自定义域名的 SSL 证书，可以配合免费申请的 SSL 证书一起使用。详情可见 <a target="_blank" rel="noopener" href="https://www.figotan.org/2016/04/26/using-free-wosign-to-certificate-your-blog-on-gitlab/">零成本打造安全博客的简单办法</a>。</p>

      </section>
      <section class="extra">
        
          <ul class="copyright">
  
    <li><strong>本文作者：</strong>习武</li>
    <li><strong>本文链接：</strong><a href="https://gitee.com/xiwu123/xiwu_see.git/2016/05/21/GitHub/enable-https-for-github-pages/index.html" title="https:&#x2F;&#x2F;gitee.com&#x2F;xiwu123&#x2F;xiwu_see.git&#x2F;2016&#x2F;05&#x2F;21&#x2F;GitHub&#x2F;enable-https-for-github-pages&#x2F;index.html">https:&#x2F;&#x2F;gitee.com&#x2F;xiwu123&#x2F;xiwu_see.git&#x2F;2016&#x2F;05&#x2F;21&#x2F;GitHub&#x2F;enable-https-for-github-pages&#x2F;index.html</a></li>
    <li><strong>版权声明：</strong>本博客所有文章均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" title="BY-NC-SA" target="_blank" rel="noopener">BY-NC-SA</a> 许可协议，转载请注明出处！</li>
  
</ul>
        
        
        
  <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/xiwu_see/tags/GitHub-Pages-SSL-Let-s-Encrypt/" rel="tag">GitHub Pages, SSL, Let's Encrypt</a></li></ul> 

        
  <nav class="nav">
    <a href="/xiwu_see/2016/09/20/Java/java-output-ab/"><i class="iconfont iconleft"></i>一道在知乎很火的 Java 题——如何输出 ab</a>
    <a href="/xiwu_see/2016/01/12/Linux/use-ubuntu-notes/">Ubuntu 使用笔记<i class="iconfont iconright"></i></a>
  </nav>

      </section>
      
    </section>
  </div>
</article></div>
      <div class="col-xl-3">
        
          
  <aside class="toc-wrap">
    <h3 class="toc-title">文章目录：</h3>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%98%E8%B5%B7"><span class="toc-text">缘起</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%AD%A5%E9%AA%A4"><span class="toc-text">步骤</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%90%8E%E8%AF%9D"><span class="toc-text">后话</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86"><span class="toc-text">实现原理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8-Kloudsec-%E7%9A%84%E5%A5%BD%E5%A4%84"><span class="toc-text">使用 Kloudsec 的好处</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8-Kloudsec-%E7%9A%84%E9%A3%8E%E9%99%A9%E5%92%8C%E5%BD%B1%E5%93%8D"><span class="toc-text">使用 Kloudsec 的风险和影响</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B6%E5%AE%83%E5%81%9A%E6%B3%95"><span class="toc-text">其它做法</span></a></li></ol>
  </aside>

        
      </div>
    </div>
  </div>
</main>
  

<footer class="footer">
  <div class="footer-social"><a 
        href="tencent://message/?Menu=yes&uin=756364924 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#12B7F5'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconQQ "></i>
      </a><a 
        href="javascript:; "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#09BB07'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconwechat-fill "></i>
      </a><a 
        href="https://github.com/xiwuxisheng "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#9f7be1'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  icongithub-fill "></i>
      </a><a 
        href="756364924@qq.com "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color=#FF3B00" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconmail"></i>
      </a></div>
  
    <div class="footer-copyright"><p>Powered by <a target="_blank" href="https://hexo.io">习武</a>  |  Theme - <a target="_blank" href="https://xiwu123.gitee.io/xiwu_see">习武的个人博客</a></p></div>
  
</footer>
  
      <div class="fab fab-plus">
    <i class="iconfont iconplus"></i>
  </div>
  
  
  <div class="fab fab-up">
    <i class="iconfont iconcaret-up"></i>
  </div>
  
  
    <div class="scrollbar j-scrollbar">
  <div class="scrollbar-current j-scrollbar-current"></div>
</div>
  
  
    
<script src="/xiwu_see/js/color-mode.js"></script>

  
</body>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>



  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>




  
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>








<script src="/xiwu_see/js/utils.js"></script>
<script src="/xiwu_see/js/script.js"></script>





  <script>
    (function () {
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
      }
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>













</html>